<template>
  <div>
    <div class="dynamic-wrap">
      <div v-for="item in keysList" :key="item">
        <a-row :gutter="24">
          <a-form-item label="预算项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-spin :spinning="spinning" tip="加载中...">
              <a-select
                :show-search="false"
                placeholder="请选择预算项目"
                @popupScroll="popupScroll"
                optionFilterProp="children"
                showSearch
                :allow-clear="true"
                :field-names="{ label: 'name', value: 'projectId' }"
                :option="dataList"
                v-decorator="[
                  `${title}projectId[${item}]`,
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择预算项目!'
                      }
                    ]
                  }]">

                <a-select-option v-for="(item, index) in dataList" :key="item.projectId" :value="item.projectId">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-spin>

          </a-form-item>
          <a-form-item label="项目值" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              placeholder="请输入项目值"
              v-decorator="[
                `${title}value[${item}]`,
                {
                  initialValue: arr[item] ? arr[item].value : undefined,
                  rules: [
                    {
                      required: true,
                      message: '请输入项目值!'
                    }
                  ]
                }
              ]" />
          </a-form-item>
          <a-form-item class="RowBtn">
            <a-button
              type="danger"
              ghost
              class="deleteRowBtn"
              v-if="keysList.length > 1"
              @click="() => removeRow(item)"
              icon="delete">
              删除
            </a-button>
          </a-form-item>
        </a-row>
      </div>
      <a-row>
        <a-form-item class="RowBtn">
          <a-button type="dashed" class="addRowBtn" @click="addRow" icon="plus">新增</a-button>
        </a-form-item>
      </a-row>
    </div>
  </div>
</template>

<script>

import { getProjects } from '@/api/budget'
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    hasAddress: {
      type: Boolean,
      default: false
    },
    arr: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      id: 0,
      keysList: [],
      treeData: [],
      // replaceFields: { children: 'children', label: 'name', value: 'projectId', key: 'projectId' },
      // 下拉
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      max: false,
      spinning: false,
      searchWorld: '',
      total: 0
    }
  },
  created () {
    this.form = this.$form.createForm(this)
    this.init()
  },
  mounted () {
        if (this.max) return
        this.loadDatas()
    },
  methods: {
    // 初始化
    init () {
      const arr = [0]
      if (this.arr.length !== 0) {
        for (let i = 1; i < this.arr.length; i++) {
          arr.push(i)
          this.id = this.id + 1
        }
      }
      this.keysList = arr
    },
    // 移除某行
    removeRow (k) {
      if (this.keysList.length === 1) {
        // 如果存在可以移除所有行的情况，把条件改为this.keysList.length === 0即可
        return
      }
      this.keysList = this.keysList.filter(item => item !== k)
    },
    // 新增一行
    addRow () {
      this.id = this.id + 1
      this.keysList = this.keysList.concat(this.id)
    },
    loadDatas () {
      this.pageNo = 1
      var param = {
        current: this.pageNo,
        pageSize: this.pageSize,
        description: '',
        categoryId: '',
        name: this.searchWorld,
        code: '',
        inOrOut: '',
        valueType: ''
      }
      getProjects(param).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.datas
          this.total = res.data.total
        }
      })
    },
    // 滚动条滚动监听方法
    async popupScroll (e) {
      const that = this
      const { target } = e
      const scrollHeight = target.scrollHeight - target.scrollTop // 滑动总高度
      const clientHeight = target.clientHeight // 滑动最低高度
      // 当下拉框滚动条到达底部的时候
      if (!this.max && scrollHeight < clientHeight + 2) {
        this.spinning = true
        // 数据起始条数
        this.pageNo++
        var newList = []
        var param = {
          current: this.pageNo,
          pageSize: this.pageSize,
          description: '',
          categoryId: '',
          name: this.searchWorld,
          code: '',
          inOrOut: '',
          valueType: ''
        }
        await getProjects(param).then((res) => {
          if (res.code == 200) {
            newList = res.data.datas
            that.total = res.data.total
            if (newList.length == 0) {
              that.max = true
            }
          }
        })
        if (that.total != this.dataList.length) {
          // 数据追加
          this.dataList = this.dataList.concat(newList)
        }
        this.spinning = false
      }
    },
    // 下拉框搜索方法
    onSearch (val) {
      if (val.length != 0) {
        this.searchWorld = val
        this.dataList = []
        this.max = false
        this.loadDatas()
      } else {
        this.searchWorld = undefined
        this.dataList = []
        this.max = false
        this.loadDatas()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.dynamic-wrap {
  padding-top: 10px;
  background-color: white;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 250px;

  &::-webkit-scrollbar {
    width: 7px;
  }

  &::-webkit-scrollbar-thumb {
    background: #d8d8d8;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-track-piece {
    background: transparent;
  }
}

.minusRowBtn {
  color: #f5222d;
  background: #fff1f0;
  border-color: #ffa39e;
  padding-right: 7px;
  padding-left: 7px;
  height: 29px;
  margin-left: 10px;
}

.deleteRowBtn {
  // width: 120%;
  // margin-left: 20px;

  // width: 516px;
  width: 400px;
}

.addRowBtn {
  // width: 80%;
  color: #1890ff;
  border-color: #91d5ff;
  width: 400px;
  // margin-left: -3px;
}

.RowBtn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
